<template>
<div>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <!--标题-->
    <Table-title :title="TableTitle"></Table-title>
    <!--基本信息-->
    <div class="build-ID-box">
        <h1 class="Basics-title">
            <h2>基本信息</h2>
            <div class="button-group-right">
                <el-button type="edit" v-if="idDisabled" @click="idDisabled=false">编辑</el-button>
                <div v-else class="buttom-group">
                    <el-button type="cancel" @click="cancel">取消</el-button>
                    <el-button type="save" @click="idDisabled=true">保存并更新</el-button>
                </div>
            </div>
        </h1>
        <!--基本信息表格区域-->
        <div class="table-body">
            <table border bordercolor="#E8E8E8">
                <tr>
                    <td class="table-lable">姓名</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">单位</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">职务</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">民族</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">文化程度</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">政治面貌</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">调离前单位及职务</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">调离前单位及职务</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                    </td>
                    <td class="table-lable">调离前单位及职务</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--交接手续办理情况-->
    <div class="build-ID-box">
        <h1 class="Basics-title">
            <h2>交接手续办理情况</h2>
            <div class="button-group-right">
                <el-button type="edit" v-if="idDisabled" @click="idDisabled=false">编辑</el-button>
                <div v-else class="buttom-group">
                    <el-button type="cancel" @click="cancel">取消</el-button>
                    <el-button type="save" @click="idDisabled=true">保存并更新</el-button>
                </div>
            </div>
        </h1>
        <!--基本信息表格区域-->
        <div class="table-body">
            <table border bordercolor="#E8E8E8">
                <tr>
                    <td class="table-lable width-300">个人借用、保管、使用的文件资料交还情况</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable width-300">公款配置的车辆、通讯工具等公物交还情况</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable width-300">办公用房腾退情况</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable width-300">公款清欠情况</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable width-300">转办党政组织、工资关系时间</td>
                    <td class="table-input">
                        <el-input v-model="ruleForm.username" placeholder="请输入" :disabled="nameDisabled"></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable width-300">其他需要交接的情况</td>
                    <td class="table-input">
                        <el-input type="textarea" placeholder="请输入操办事由" v-model="ruleForm.textarea" show-word-limit></el-input>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--意见-->
    <div class="build-ID-box">
        <h1 class="Basics-title">
            <h2>意见</h2>
            <div class="button-group-right">
                <el-button type="edit" v-if="idDisabled" @click="idDisabled=false">编辑</el-button>
                <div v-else class="buttom-group">
                    <el-button type="cancel" @click="cancel">取消</el-button>
                    <el-button type="save" @click="idDisabled=true">保存并更新</el-button>
                </div>
            </div>
        </h1>
        <!--基本信息表格区域-->
        <div class="table-body">
            <table border bordercolor="#E8E8E8">
                <tr>
                    <td class="table-lable width-300">原工作单位意见</td>
                    <td class="table-input">
                        <el-input type="textarea" placeholder="请输入意见" v-model="ruleForm.textarea" show-word-limit></el-input>
                    </td>
                </tr>
                <tr>
                    <td class="table-lable">填表时间</td>
                    <td class="table-input">
                        <el-date-picker v-model="ruleForm.value1" type="date" placeholder="年/月/日" :disabled="nameDisabled" :clearable="false"></el-date-picker>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--附件-->
    <Attachment-upload></Attachment-upload>
    <!--吸底按钮-->
    <Confirm-button></Confirm-button>
</div>
</template>

<script>
//  面包屑
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
//  标题
import TableTitle from "@/components/IncorruptibleArchives/TableTitle.vue";
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
import ConfirmButton from "@/components/IncorruptibleArchives/ConfirmButton.vue";
export default {
    components: {
        Breadcrumb,
        TableTitle,
        AttachmentUpload,
        ConfirmButton,
    },
    data() {
        return {
            nameDisabled: false,
            ruleForm: {
                username: "",
                value1: "",
                textarea: "",
            },
            idDisabled: true,
            //标题传输的文字
            TableTitle: "领导干部离职交接廉洁自律情况登记表",
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "新建档案",
                    link: "",
                },
            ],
        }
    },
    methods: {
        //取消按钮id
        cancel() {
            this.idDisabled = true;
        },
    },
}
</script>

<style lang="less" scoped>
.build-ID-box {
    padding: 20px;
    background-color: white;
    margin-bottom: 10px;
}

//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }

    //编辑按钮的样式
    .el-button--edit {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        color: #3d7fff;
    }
}

//取消和保存按钮的样式
.buttom-group {
    .el-button--cancel {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        color: rgba(61, 127, 255, 1);
        line-height: 22px;
    }

    .el-button--save {
        width: 90px;
        height: 30px;
        background: rgba(61, 127, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        padding: 0;
    }
}

/deep/.table-body {
    table {
        width: 100%;

        .table-lable {
            width: 9%;
            height: 46px;
            background: rgba(250, 250, 250, 1);
            font-size: 14px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 21px;
            padding: 0 0 0 10px;
        }

        .table-input {
            padding: 0 10px;
        }

        .el-input {
            border-radius: 2px;

            .el-input__inner {
                height: 36px;
            }
        }

        .el-select {
            width: 100%;
        }

        .NativePlace {
            // width: 100%;

            .el-select {
                width: 32.8%;
                float: left;
                margin-right: 10px;
            }

            >.el-input {
                width: 32.5%;
                float: left;
                margin-right: 10px;
            }
        }

        .NativePlace .el-input:last-child {
            margin-right: 0px;
        }

        .el-date-editor {
            width: 100%;

            .el-input__inner {
                padding-left: 18px;
            }

            .el-input__prefix {
                left: 91%;
                top: -5%;
            }
        }

        /deep/.now-load {
            // width: 100%;
            // display: flex;
            .el-select {
                width: 40.5%;
                float: left;
                margin-right: 10px;
            }

            >.el-input {
                float: left;
                width: 57%;
            }
        }

        //输入框的最小高度
        .el-textarea {
            margin: 4px 0;

            .el-textarea__inner {
                min-height: 90px !important;
            }
        }

        .width-300 {
            width: 300px;
        }
    }
}
</style>
